<!DOCTYPE html>
<html lang="">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <meta name="robots" content="noodp" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1">
        <title>Lovelt主题美化 - kwwgoo</title><meta name="Description" content="kwwwgoo&#39;s blog"><meta property="og:title" content="Lovelt主题美化" />
<meta property="og:description" content="" />
<meta property="og:type" content="article" />
<meta property="og:url" content="http://kwwgoo.github.io/posts/test/" />
<meta property="og:image" content="http://kwwgoo.github.io/posts/test/featured-image.png"/>
<meta property="article:published_time" content="2021-03-10T15:23:37+08:00" />
<meta property="article:modified_time" content="2021-03-10T15:23:37+08:00" />
<meta name="twitter:card" content="summary_large_image"/>
<meta name="twitter:image" content="http://kwwgoo.github.io/posts/test/featured-image.png"/>
<meta name="twitter:title" content="Lovelt主题美化"/>
<meta name="twitter:description" content=""/>
<meta name="application-name" content="kwwgoo">
<meta name="apple-mobile-web-app-title" content="kwwgoo"><meta name="theme-color" content="#ffffff"><meta name="msapplication-TileColor" content="#da532c"><link rel="shortcut icon" type="image/x-icon" href="/favicon.ico" />
        <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
        <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png"><link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png"><link rel="mask-icon" href="/safari-pinned-tab.svg" color="#5bbad5"><link rel="manifest" href="/site.webmanifest"><link rel="canonical" href="http://kwwgoo.github.io/posts/test/" /><link rel="next" href="http://kwwgoo.github.io/posts/2021-3-12/" /><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/normalize.css@8.0.1/normalize.min.css"><link rel="stylesheet" href="/css/style.min.css"><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@5.13.0/css/all.min.css"><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/animate.css@3.7.2/animate.min.css"><script type="application/ld+json">
    {
        "@context": "http://schema.org",
        "@type": "BlogPosting",
        "headline": "Lovelt主题美化",
        "inLanguage": "",
        "mainEntityOfPage": {
            "@type": "WebPage",
            "@id": "http:\/\/kwwgoo.github.io\/posts\/test\/"
        },"image": [{
                            "@type": "ImageObject",
                            "url": "http:\/\/kwwgoo.github.io\/posts\/test\/featured-image.png",
                            "width":  1000 ,
                            "height":  500 
                        }],"genre": "posts","keywords": "Hugo","wordcount":  2283 ,
        "url": "http:\/\/kwwgoo.github.io\/posts\/test\/","datePublished": "2021-03-10T15:23:37+08:00","dateModified": "2021-03-10T15:23:37+08:00","publisher": {
            "@type": "Organization",
            "name": "xxxx","logo": "http:\/\/kwwgoo.github.io\/images\/avatar.png"},"author": {
                "@type": "Person",
                "name": "kwwgoo"
            },"description": ""
    }
    </script></head>
    <body header-desktop="fixed" header-mobile="fixed"><script type="text/javascript">(window.localStorage && localStorage.getItem('theme') ? localStorage.getItem('theme') === 'dark' : ('auto' === 'auto' ? window.matchMedia('(prefers-color-scheme: dark)').matches : 'auto' === 'dark')) && document.body.setAttribute('theme', 'dark');</script>

        <div id="mask"></div><div class="wrapper"><header class="desktop" id="header-desktop">
    <div class="header-wrapper">
        <a href="https://github.com/kwwgoo" class="github-corner" target="_blank" title="Follow me on GitHub" aria-label="Follow me on GitHub"><svg width="3.5rem" height="3.5rem" viewBox="0 0 250 250" style="fill:#70B7FD; color:#fff; position: absolute; top: 0; border: 0; left: 0; transform: scale(-1, 1);" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>

        <div class="header-title" >
            <a href="/" title="kwwgoo"><span class="header-title-pre">🧙</span>kwwgoo</a>
        </div>
        
        <div class="menu">
            <div class="menu-inner"><a class="menu-item" href="/posts/"><i class='fas fa-home fa-fw'></i> 文章 </a><a class="menu-item" href="/tags/"><i class='fas fa-tags fa-fw'></i> 标签 </a><a class="menu-item" href="/categories/"><i class='fas fa-archive fa-fw'></i> 分类 </a><a class="menu-item" href="/friends/"><i class='fas fa-user-friends fa-fw'></i> 友链 </a><a class="menu-item" href="/about/"><i class='fas fa-user-secret fa-fw'></i> 关于 </a><span class="menu-item delimiter"></span><span class="menu-item search" id="search-desktop">
                        <input type="text" placeholder="搜索文章标题或内容..." id="search-input-desktop">
                        <a href="javascript:void(0);" class="search-button search-toggle" id="search-toggle-desktop" title="搜索">
                            <i class="fas fa-search fa-fw"></i>
                        </a>
                        <a href="javascript:void(0);" class="search-button search-clear" id="search-clear-desktop" title="清空">
                            <i class="fas fa-times-circle fa-fw"></i>
                        </a>
                        <span class="search-button search-loading" id="search-loading-desktop">
                            <i class="fas fa-spinner fa-fw fa-spin"></i>
                        </span>
                    </span><a href="javascript:void(0);" class="menu-item theme-switch" title="切换主题">
                    <i class="fas fa-adjust fa-fw"></i>
                </a>
            </div>
        </div>
    </div>
</header><header class="mobile" id="header-mobile">
    <div class="header-container">
        <div class="header-wrapper">
            <div class="header-title">
                <a href="/" title="kwwgoo"><span class="header-title-pre">🧙</span>kwwgoo</a>
            </div>
            <div class="menu-toggle" id="menu-toggle-mobile">
                <span></span><span></span><span></span>
            </div>
        </div>
        <div class="menu" id="menu-mobile"><div class="search-wrapper">
                    <div class="search mobile" id="search-mobile">
                        <input type="text" placeholder="搜索文章标题或内容..." id="search-input-mobile">
                        <a href="javascript:void(0);" class="search-button search-toggle" id="search-toggle-mobile" title="搜索">
                            <i class="fas fa-search fa-fw"></i>
                        </a>
                        <a href="javascript:void(0);" class="search-button search-clear" id="search-clear-mobile" title="清空">
                            <i class="fas fa-times-circle fa-fw"></i>
                        </a>
                        <span class="search-button search-loading" id="search-loading-mobile">
                            <i class="fas fa-spinner fa-fw fa-spin"></i>
                        </span>
                    </div>
                    <a href="javascript:void(0);" class="search-cancel" id="search-cancel-mobile">
                        取消
                    </a>
                </div><a class="menu-item" href="/posts/" title=""><i class='fas fa-home fa-fw'></i>文章</a><a class="menu-item" href="/tags/" title=""><i class='fas fa-tags fa-fw'></i>标签</a><a class="menu-item" href="/categories/" title=""><i class='fas fa-archive fa-fw'></i>分类</a><a class="menu-item" href="/friends/" title=""><i class='fas fa-user-friends fa-fw'></i>友链</a><a class="menu-item" href="/about/" title=""><i class='fas fa-user-secret fa-fw'></i>关于</a><a href="javascript:void(0);" class="menu-item theme-switch" title="切换主题">
                <i class="fas fa-adjust fa-fw"></i>
            </a></div>
    </div>
</header>
<div class="search-dropdown desktop">
    <div id="search-dropdown-desktop"></div>
</div>
<div class="search-dropdown mobile">
    <div id="search-dropdown-mobile"></div>
</div>
<main class="main">
                <div class="container"><div class="toc" id="toc-auto">
            <h2 class="toc-title">目录</h2>
            <div class="toc-content" id="toc-content-auto"></div>
        </div><article class="page single"><h1 class="single-title animated flipInX">Lovelt主题美化</h1><div class="post-meta">
            <div class="post-meta-line"><span class="post-author"><a href="https://github.com/kwwgoo" title="Author" target="_blank" rel="noopener noreffer author" class="author"><i class="fas fa-user-circle fa-fw"></i>kwwgoo</a></span>&nbsp;<span class="post-category">收录于 <a href="/categories/%E4%B8%BB%E9%A2%98%E7%BE%8E%E5%8C%96/"><i class="far fa-folder fa-fw"></i>主题美化</a></span></div>
            <div class="post-meta-line"><i class="far fa-calendar-alt fa-fw"></i>&nbsp;<time datetime="2021-03-10">2021-03-10</time>&nbsp;<i class="fas fa-pencil-alt fa-fw"></i>&nbsp;约 2283 字
                <i class="far fa-clock fa-fw"></i>&nbsp;预计阅读 11 分钟&nbsp;</div>

        </div><div class="featured-image"><img
        class="lazyload"
        src="/svg/loading.min.svg"
        data-src="/posts/test/featured-image.png"
        data-srcset="/posts/test/featured-image.png, /posts/test/featured-image.png 1.5x, /posts/test/featured-image.png 2x"
        data-sizes="auto"
        alt="/posts/test/featured-image.png"
        title="/posts/test/featured-image.png" /></div><div class="details toc" id="toc-static"  kept="">
                <div class="details-summary toc-title">
                    <span>目录</span>
                    <span><i class="details-icon fas fa-angle-right"></i></span>
                </div>
                <div class="details-content toc-content" id="toc-content-static"><nav id="TableOfContents">
  <ul>
    <li><a href="#主题自带的admonition样式">主题自带的admonition样式</a></li>
    <li><a href="#添加背景图片轮播">添加背景图片轮播</a></li>
    <li><a href="#添加百度统计">添加百度统计</a>
      <ul>
        <li><a href="#添加百度统计相关变量">添加百度统计相关变量</a></li>
        <li><a href="#将百度统计的脚本代码添加到analyticshtml里">将百度统计的脚本代码添加到analytics.html里</a></li>
        <li><a href="#启用百度统计">启用百度统计</a></li>
      </ul>
    </li>
    <li><a href="#添加鼠标右键菜单">添加鼠标右键菜单</a>
      <ul>
        <li><a href="#添加右键菜单的变量">添加右键菜单的变量</a></li>
        <li><a href="#添加rightmenuhtml文件">添加<code>rightmenu.html</code>文件</a></li>
        <li><a href="#修改assetshtml文件">修改<code>assets.html</code>文件</a></li>
      </ul>
    </li>
    <li><a href="#添加文章加密功能">添加文章加密功能</a></li>
    <li><a href="#添加github-corner">添加GitHub Corner</a></li>
    <li><a href="#页面下方添加拉姆雷姆快捷跳转">页面下方添加拉姆雷姆快捷跳转</a></li>
    <li><a href="#添加首页头像挂件">添加首页头像挂件</a>
      <ul>
        <li><a href="#修改站点配置文件">修改站点配置文件</a></li>
        <li><a href="#修改模板文件profilehtml">修改模板文件profile.html</a></li>
        <li><a href="#修改模板文件assetshtml">修改模板文件assets.html</a></li>
        <li><a href="#添加css代码">添加css代码</a></li>
      </ul>
    </li>
    <li><a href="#添加归档分类页面里的文章数量统计">添加归档、分类页面里的文章数量统计</a>
      <ul>
        <li><a href="#在listhtml里添加sup标签">在list.html里添加<code>sup</code>标签</a></li>
        <li><a href="#在termshtml里添加sup标签">在terms.html里添加<code>sup</code>标签</a></li>
        <li><a href="#在sectionhtml里添加sup标签">在section.html里添加<code>sup</code>标签</a></li>
      </ul>
    </li>
    <li><a href="#修改侧边栏目录样式">修改侧边栏目录样式</a></li>
  </ul>
</nav></div>
            </div><div class="content" id="content"><h1 id="hugo主题美化">Hugo主题美化</h1>
<blockquote>
<p>以下所有东西都来自于大佬<a href="https://lewky.cn/posts/hugo-3.html/" target="_blank" rel="noopener noreffer">雨临Lewis</a> 搬运这些东西只是为了自己方便美化</p>
</blockquote>
<h2 id="主题自带的admonition样式">主题自带的admonition样式</h2>
<p>LoveIt提供了<code>admonition</code> shortcode，支持 <strong>12</strong> 种样式，可以在页面中插入提示的横幅。代码如下：</p>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre class="chroma"><code><span class="lnt"> 1
</span><span class="lnt"> 2
</span><span class="lnt"> 3
</span><span class="lnt"> 4
</span><span class="lnt"> 5
</span><span class="lnt"> 6
</span><span class="lnt"> 7
</span><span class="lnt"> 8
</span><span class="lnt"> 9
</span><span class="lnt">10
</span><span class="lnt">11
</span><span class="lnt">12
</span><span class="lnt">13
</span><span class="lnt">14
</span><span class="lnt">15
</span><span class="lnt">16
</span><span class="lnt">17
</span><span class="lnt">18
</span><span class="lnt">19
</span><span class="lnt">20
</span><span class="lnt">21
</span><span class="lnt">22
</span><span class="lnt">23
</span><span class="lnt">24
</span><span class="lnt">25
</span><span class="lnt">26
</span><span class="lnt">27
</span><span class="lnt">28
</span><span class="lnt">29
</span><span class="lnt">30
</span><span class="lnt">31
</span><span class="lnt">32
</span><span class="lnt">33
</span><span class="lnt">34
</span><span class="lnt">35
</span><span class="lnt">36
</span><span class="lnt">37
</span><span class="lnt">38
</span><span class="lnt">39
</span><span class="lnt">40
</span><span class="lnt">41
</span><span class="lnt">42
</span><span class="lnt">43
</span><span class="lnt">44
</span><span class="lnt">45
</span><span class="lnt">46
</span><span class="lnt">47
</span></code></pre></td>
<td class="lntd">
<pre class="chroma"><code class="language-fallback" data-lang="fallback">{{&lt; admonition &gt;}}
一个 **注意** 横幅
{{&lt; /admonition &gt;}}

{{&lt; admonition abstract &gt;}}
一个 **摘要** 横幅
{{&lt; /admonition &gt;}}

{{&lt; admonition info &gt;}}
一个 **信息** 横幅
{{&lt; /admonition &gt;}}

{{&lt; admonition tip &gt;}}
一个 **技巧** 横幅
{{&lt; /admonition &gt;}}

{{&lt; admonition success &gt;}}
一个 **成功** 横幅
{{&lt; /admonition &gt;}}

{{&lt; admonition question &gt;}}
一个 **问题** 横幅
{{&lt; /admonition &gt;}}

{{&lt; admonition warning &gt;}}
一个 **警告** 横幅
{{&lt; /admonition &gt;}}

{{&lt; admonition failure &gt;}}
一个 **失败** 横幅
{{&lt; /admonition &gt;}}

{{&lt; admonition danger &gt;}}
一个 **危险** 横幅
{{&lt; /admonition &gt;}}

{{&lt; admonition bug &gt;}}
一个 **Bug** 横幅
{{&lt; /admonition &gt;}}

{{&lt; admonition example &gt;}}
一个 **示例** 横幅
{{&lt; /admonition &gt;}}

{{&lt; admonition quote &gt;}}
一个 **引用** 横幅
{{&lt; /admonition &gt;}}
</code></pre></td></tr></table>
</div>
</div><p>效果如下：
<div class="details admonition note open">
        <div class="details-summary admonition-title">
            <i class="icon fas fa-pencil-alt fa-fw"></i>注意<i class="details-icon fas fa-angle-right fa-fw"></i>
        </div>
        <div class="details-content">
            <div class="admonition-content">一个 <strong>注意</strong> 横幅</div>
        </div>
    </div></p>
<div class="details admonition abstract open">
        <div class="details-summary admonition-title">
            <i class="icon fas fa-list-ul fa-fw"></i>摘要<i class="details-icon fas fa-angle-right fa-fw"></i>
        </div>
        <div class="details-content">
            <div class="admonition-content">一个 <strong>摘要</strong> 横幅</div>
        </div>
    </div>
<div class="details admonition info open">
        <div class="details-summary admonition-title">
            <i class="icon fas fa-info-circle fa-fw"></i>信息<i class="details-icon fas fa-angle-right fa-fw"></i>
        </div>
        <div class="details-content">
            <div class="admonition-content">一个 <strong>信息</strong> 横幅</div>
        </div>
    </div>
<div class="details admonition tip open">
        <div class="details-summary admonition-title">
            <i class="icon fas fa-lightbulb fa-fw"></i>技巧<i class="details-icon fas fa-angle-right fa-fw"></i>
        </div>
        <div class="details-content">
            <div class="admonition-content">一个 <strong>技巧</strong> 横幅</div>
        </div>
    </div>
<div class="details admonition success open">
        <div class="details-summary admonition-title">
            <i class="icon fas fa-check-circle fa-fw"></i>成功<i class="details-icon fas fa-angle-right fa-fw"></i>
        </div>
        <div class="details-content">
            <div class="admonition-content">一个 <strong>成功</strong> 横幅</div>
        </div>
    </div>
<div class="details admonition question open">
        <div class="details-summary admonition-title">
            <i class="icon fas fa-question-circle fa-fw"></i>问题<i class="details-icon fas fa-angle-right fa-fw"></i>
        </div>
        <div class="details-content">
            <div class="admonition-content">一个 <strong>问题</strong> 横幅</div>
        </div>
    </div>
<div class="details admonition warning open">
        <div class="details-summary admonition-title">
            <i class="icon fas fa-exclamation-triangle fa-fw"></i>警告<i class="details-icon fas fa-angle-right fa-fw"></i>
        </div>
        <div class="details-content">
            <div class="admonition-content">一个 <strong>警告</strong> 横幅</div>
        </div>
    </div>
<div class="details admonition failure open">
        <div class="details-summary admonition-title">
            <i class="icon fas fa-times-circle fa-fw"></i>失败<i class="details-icon fas fa-angle-right fa-fw"></i>
        </div>
        <div class="details-content">
            <div class="admonition-content">一个 <strong>失败</strong> 横幅</div>
        </div>
    </div>
<div class="details admonition danger open">
        <div class="details-summary admonition-title">
            <i class="icon fas fa-skull-crossbones fa-fw"></i>危险<i class="details-icon fas fa-angle-right fa-fw"></i>
        </div>
        <div class="details-content">
            <div class="admonition-content">一个 <strong>危险</strong> 横幅</div>
        </div>
    </div>
<div class="details admonition bug open">
        <div class="details-summary admonition-title">
            <i class="icon fas fa-bug fa-fw"></i>Bug<i class="details-icon fas fa-angle-right fa-fw"></i>
        </div>
        <div class="details-content">
            <div class="admonition-content">一个 <strong>Bug</strong> 横幅</div>
        </div>
    </div>
<div class="details admonition example open">
        <div class="details-summary admonition-title">
            <i class="icon fas fa-list-ol fa-fw"></i>示例<i class="details-icon fas fa-angle-right fa-fw"></i>
        </div>
        <div class="details-content">
            <div class="admonition-content">一个 <strong>示例</strong> 横幅</div>
        </div>
    </div>
<div class="details admonition quote open">
        <div class="details-summary admonition-title">
            <i class="icon fas fa-quote-right fa-fw"></i>引用<i class="details-icon fas fa-angle-right fa-fw"></i>
        </div>
        <div class="details-content">
            <div class="admonition-content">一个 <strong>引用</strong> 横幅</div>
        </div>
    </div>
<h2 id="添加背景图片轮播">添加背景图片轮播</h2>
<p>这个功能需要引入图片轮播插件<code>jquery-backstretch</code>的cdn，并且该插件依赖于jQuery，需要在引入该插件之前引入jQuery。</p>
<p>打开<code>\layouts\partials\assets.html</code>，在你引入的<code>custom.js</code>的上面一行添加如下代码（必须要在custom.js之前引入这两个文件才有效果）：</p>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre class="chroma"><code><span class="lnt">1
</span><span class="lnt">2
</span></code></pre></td>
<td class="lntd">
<pre class="chroma"><code class="language-html" data-lang="html"><span class="p">&lt;</span><span class="nt">script</span> <span class="na">type</span><span class="o">=</span><span class="s">&#34;text/javascript&#34;</span> <span class="na">src</span><span class="o">=</span><span class="s">&#34;https://cdn.jsdelivr.net/npm/jquery@2.1.3/dist/jquery.min.js&#34;</span><span class="p">&gt;&lt;/</span><span class="nt">script</span><span class="p">&gt;</span>
<span class="p">&lt;</span><span class="nt">script</span> <span class="na">type</span><span class="o">=</span><span class="s">&#34;text/javascript&#34;</span> <span class="na">src</span><span class="o">=</span><span class="s">&#34;https://cdn.jsdelivr.net/npm/jquery-backstretch@2.1.18/jquery.backstretch.min.js&#34;</span><span class="p">&gt;&lt;/</span><span class="nt">script</span><span class="p">&gt;</span>
</code></pre></td></tr></table>
</div>
</div><p>然后在<code>custom.js</code>里添加如下代码，具体想要轮播哪些图片可以自行修改，如下：</p>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre class="chroma"><code><span class="lnt">1
</span><span class="lnt">2
</span><span class="lnt">3
</span><span class="lnt">4
</span><span class="lnt">5
</span><span class="lnt">6
</span><span class="lnt">7
</span><span class="lnt">8
</span></code></pre></td>
<td class="lntd">
<pre class="chroma"><code class="language-javascript" data-lang="javascript"><span class="cm">/* 轮播背景图片 */</span>
<span class="nx">$</span><span class="p">(</span><span class="kd">function</span> <span class="p">()</span> <span class="p">{</span>
	<span class="nx">$</span><span class="p">.</span><span class="nx">backstretch</span><span class="p">([</span>
		  <span class="s2">&#34;/images/background/saber1.jpg&#34;</span><span class="p">,</span>
		  <span class="s2">&#34;/images/background/saber2.jpg&#34;</span><span class="p">,</span>
		  <span class="s2">&#34;/images/background/wlop.jpg&#34;</span>
	<span class="p">],</span> <span class="p">{</span> <span class="nx">duration</span><span class="o">:</span> <span class="mi">60000</span><span class="p">,</span> <span class="nx">fade</span><span class="o">:</span> <span class="mi">1500</span> <span class="p">});</span>
<span class="p">});</span>
</code></pre></td></tr></table>
</div>
</div><h2 id="添加百度统计">添加百度统计</h2>
<p>默认的统计功能只有<code>Google Analytics</code>和<code>Fathom Analytics</code>两种，想要使用百度统计需要自行修改配置文件和模板文件。</p>
<h3 id="添加百度统计相关变量">添加百度统计相关变量</h3>
<p>在站点配置文件里找到统计相关的配置，如下：</p>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre class="chroma"><code><span class="lnt"> 1
</span><span class="lnt"> 2
</span><span class="lnt"> 3
</span><span class="lnt"> 4
</span><span class="lnt"> 5
</span><span class="lnt"> 6
</span><span class="lnt"> 7
</span><span class="lnt"> 8
</span><span class="lnt"> 9
</span><span class="lnt">10
</span><span class="lnt">11
</span><span class="lnt">12
</span><span class="lnt">13
</span><span class="lnt">14
</span><span class="lnt">15
</span><span class="lnt">16
</span></code></pre></td>
<td class="lntd">
<pre class="chroma"><code class="language-toml" data-lang="toml">  <span class="c"># Analytics config</span>
  <span class="c"># 网站分析配置</span>
  <span class="p">[</span><span class="nx">params</span><span class="p">.</span><span class="nx">analytics</span><span class="p">]</span>
    <span class="nx">enable</span> <span class="p">=</span> <span class="nx">flase</span>
    <span class="c"># Google Analytics</span>
    <span class="p">[</span><span class="nx">params</span><span class="p">.</span><span class="nx">analytics</span><span class="p">.</span><span class="nx">google</span><span class="p">]</span>
      <span class="nx">id</span> <span class="p">=</span> <span class="s2">&#34;&#34;</span>
      <span class="c"># whether to anonymize IP</span>
      <span class="c"># 是否匿名化用户 IP</span>
      <span class="nx">anonymizeIP</span> <span class="p">=</span> <span class="kc">true</span>
    <span class="c"># Fathom Analytics</span>
    <span class="p">[</span><span class="nx">params</span><span class="p">.</span><span class="nx">analytics</span><span class="p">.</span><span class="nx">fathom</span><span class="p">]</span>
      <span class="nx">id</span> <span class="p">=</span> <span class="s2">&#34;&#34;</span>
      <span class="c"># server url for your tracker if you&#39;re self hosting</span>
      <span class="c"># 自行托管追踪器时的主机路径</span>
      <span class="nx">server</span> <span class="p">=</span> <span class="s2">&#34;&#34;</span>
</code></pre></td></tr></table>
</div>
</div><p>在这里的<code>[params.analytics.fathom]</code>后面添加一个新的变量给百度统计使用：</p>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre class="chroma"><code><span class="lnt">1
</span><span class="lnt">2
</span><span class="lnt">3
</span><span class="lnt">4
</span></code></pre></td>
<td class="lntd">
<pre class="chroma"><code class="language-toml" data-lang="toml">    <span class="c"># Baidu Analytics</span>
    <span class="c"># 百度统计</span>
    <span class="p">[</span><span class="nx">params</span><span class="p">.</span><span class="nx">analytics</span><span class="p">.</span><span class="nx">baidu</span><span class="p">]</span>
      <span class="nx">id</span> <span class="p">=</span> <span class="s2">&#34;&#34;</span>
</code></pre></td></tr></table>
</div>
</div><h3 id="将百度统计的脚本代码添加到analyticshtml里">将百度统计的脚本代码添加到analytics.html里</h3>
<p>首先拷贝<code>\themes\LoveIt\layouts\partials\plugin\analytics.html</code>到<code>\layouts\partials\plugin\analytics.html</code>。</p>
<p>打开拷贝后的analytics.html文件，在<code>Fathom Analytics</code>的代码下面加上如下内容：</p>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre class="chroma"><code><span class="lnt"> 1
</span><span class="lnt"> 2
</span><span class="lnt"> 3
</span><span class="lnt"> 4
</span><span class="lnt"> 5
</span><span class="lnt"> 6
</span><span class="lnt"> 7
</span><span class="lnt"> 8
</span><span class="lnt"> 9
</span><span class="lnt">10
</span><span class="lnt">11
</span><span class="lnt">12
</span></code></pre></td>
<td class="lntd">
<pre class="chroma"><code class="language-html" data-lang="html">	{{- /* Baidu Analytics */ -}}
    {{- with $analytics.baidu.id -}}
		<span class="p">&lt;</span><span class="nt">script</span><span class="p">&gt;</span>
			<span class="kd">var</span> <span class="nx">_hmt</span> <span class="o">=</span> <span class="nx">_hmt</span> <span class="o">||</span> <span class="p">[];</span>
			<span class="p">(</span><span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
			  <span class="kd">var</span> <span class="nx">hm</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nx">createElement</span><span class="p">(</span><span class="s2">&#34;script&#34;</span><span class="p">);</span>
			  <span class="nx">hm</span><span class="p">.</span><span class="nx">src</span> <span class="o">=</span> <span class="s2">&#34;https://hm.baidu.com/hm.js?{{ . }}&#34;</span><span class="p">;</span>
			  <span class="kd">var</span> <span class="nx">s</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nx">getElementsByTagName</span><span class="p">(</span><span class="s2">&#34;script&#34;</span><span class="p">)[</span><span class="mi">0</span><span class="p">];</span> 
			  <span class="nx">s</span><span class="p">.</span><span class="nx">parentNode</span><span class="p">.</span><span class="nx">insertBefore</span><span class="p">(</span><span class="nx">hm</span><span class="p">,</span> <span class="nx">s</span><span class="p">);</span>
			<span class="p">})();</span>
		<span class="p">&lt;/</span><span class="nt">script</span><span class="p">&gt;</span>
	{{- end -}}
</code></pre></td></tr></table>
</div>
</div><h3 id="启用百度统计">启用百度统计</h3>
<p>将统计功能的<code>enable = flase</code>改为<code>enable = true</code>。在新增的百度统计变量的<code>id</code>那里填上你的百度统计id值，也就是百度统计的脚本代码里<code>https://hm.baidu.com/hm.js?</code>后面跟着的那串很长的东东。如果不知道怎么查看这个百度统计id，请自行百度。</p>
<h2 id="添加鼠标右键菜单">添加鼠标右键菜单</h2>
<h3 id="添加右键菜单的变量">添加右键菜单的变量</h3>
<p>打开站点配置文件，添加如下变量，可以自行定制菜单里的按钮，包括数量、名称、图片和地址：</p>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre class="chroma"><code><span class="lnt"> 1
</span><span class="lnt"> 2
</span><span class="lnt"> 3
</span><span class="lnt"> 4
</span><span class="lnt"> 5
</span><span class="lnt"> 6
</span><span class="lnt"> 7
</span><span class="lnt"> 8
</span><span class="lnt"> 9
</span><span class="lnt">10
</span><span class="lnt">11
</span><span class="lnt">12
</span><span class="lnt">13
</span><span class="lnt">14
</span><span class="lnt">15
</span><span class="lnt">16
</span><span class="lnt">17
</span><span class="lnt">18
</span><span class="lnt">19
</span><span class="lnt">20
</span><span class="lnt">21
</span><span class="lnt">22
</span><span class="lnt">23
</span><span class="lnt">24
</span><span class="lnt">25
</span><span class="lnt">26
</span><span class="lnt">27
</span><span class="lnt">28
</span><span class="lnt">29
</span><span class="lnt">30
</span><span class="lnt">31
</span><span class="lnt">32
</span></code></pre></td>
<td class="lntd">
<pre class="chroma"><code class="language-fallback" data-lang="fallback">  # Right click menu
  # 右键菜单
  [params.rightmenu]
    enable = true  # true or false  是否开启右键
    audio = false  # true or false 是否开启点击音乐
    [[params.rightmenu.layout]]
      # 按钮名称
      name = &#34;首页&#34;
      # 背景图片
      image = &#34;/images/rightmenu/rightmenu1.jpg&#34;
      # 跳转地址
      url = &#34;/&#34;
    [[params.rightmenu.layout]]
      name = &#34;音乐游戏&#34;
      image = &#34;/images/rightmenu/rightmenu2.jpg&#34;
      url = &#34;/funny/mikutap/&#34;
    [[params.rightmenu.layout]]
      name = &#34;前方高能&#34;
      image = &#34;/images/rightmenu/rightmenu3.jpg&#34;
      url = &#34;/funny/high/&#34;
    [[params.rightmenu.layout]]
      name = &#34;建站日志&#34;
      image = &#34;/images/rightmenu/rightmenu4.jpg&#34;
      url = &#34;/posts/e62c38c4.html&#34;
    [[params.rightmenu.layout]]
      name = &#34;随笔&#34;
      image = &#34;/images/rightmenu/rightmenu5.jpg&#34;
      url = &#34;/posts/d65a1577.html&#34;
    [[params.rightmenu.layout]]
      name = &#34;友链&#34;
      image = &#34;/images/rightmenu/rightmenu6.jpg&#34;
      url = &#34;/friends/&#34;
</code></pre></td></tr></table>
</div>
</div><p>如果你有图床的话，还可以额外增加一个图床变量，这样可以去图床加载你的图片，可以参考前文的<a href="http://localhost:1313/posts/hugo-3.html/#%E6%B7%BB%E5%8A%A0%E5%85%A8%E5%B1%80cdn%E5%8F%98%E9%87%8F" target="_blank" rel="noopener noreffer">添加全局cdn变量</a>。</p>
<h3 id="添加rightmenuhtml文件">添加<code>rightmenu.html</code>文件</h3>
<p>新建一个<code>layouts/partials/plugin/rightmenu.html</code>文件，内容如下：</p>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre class="chroma"><code><span class="lnt"> 1
</span><span class="lnt"> 2
</span><span class="lnt"> 3
</span><span class="lnt"> 4
</span><span class="lnt"> 5
</span><span class="lnt"> 6
</span><span class="lnt"> 7
</span><span class="lnt"> 8
</span><span class="lnt"> 9
</span><span class="lnt">10
</span><span class="lnt">11
</span><span class="lnt">12
</span><span class="lnt">13
</span><span class="lnt">14
</span><span class="lnt">15
</span><span class="lnt">16
</span><span class="lnt">17
</span><span class="lnt">18
</span><span class="lnt">19
</span><span class="lnt">20
</span><span class="lnt">21
</span><span class="lnt">22
</span><span class="lnt">23
</span><span class="lnt">24
</span><span class="lnt">25
</span><span class="lnt">26
</span><span class="lnt">27
</span><span class="lnt">28
</span><span class="lnt">29
</span><span class="lnt">30
</span><span class="lnt">31
</span><span class="lnt">32
</span><span class="lnt">33
</span><span class="lnt">34
</span><span class="lnt">35
</span><span class="lnt">36
</span><span class="lnt">37
</span><span class="lnt">38
</span><span class="lnt">39
</span><span class="lnt">40
</span><span class="lnt">41
</span><span class="lnt">42
</span><span class="lnt">43
</span><span class="lnt">44
</span><span class="lnt">45
</span></code></pre></td>
<td class="lntd">
<pre class="chroma"><code class="language-fallback" data-lang="fallback">{{- $rightmenu := .Site.Params.rightmenu -}}
{{- $cdn := .Site.Params.cdnPrefix -}}
{{- if $rightmenu.enable -}}
   	&lt;div class=&#34;GalMenu GalDropDown&#34;&gt;
	      &lt;div class=&#34;circle&#34; id=&#34;gal&#34;&gt;
	        &lt;div class=&#34;ring&#34;&gt;
			{{- range $item := $rightmenu.layout -}}
			{{- $defaultURL := &#34;/&#34; -}}
			{{- $defaultName := &#34;Home&#34; -}}
			{{- $defaultImage := &#34;https://gravatar.loli.net/avatar/c02f8b813aa4b7f72e32de5a48dc17a7?d=retro&amp;v=1.4.14&#34; -}}
	          &lt;a href=&#34;{{- $item.url | default $defaultURL -}}&#34; 
			  target=&#34;_blank&#34; 
			{{- $itemImage := $item.image | default $defaultImage -}}
			{{- if strings.HasPrefix $item.image &#34;http&#34; -}}
			  style=&#34;background-image:url({{- $itemImage -}});&#34; 
			{{- else if strings.HasPrefix $item.image &#34;/&#34; -}}
			  style=&#34;background-image:url({{- $cdn -}}{{- $itemImage -}});&#34; 
			{{- else -}}
			  style=&#34;background-image:url({{- $itemImage -}});&#34; 
			{{- end -}}
			  class=&#34;menuItem&#34;&gt;{{- $item.name | default $defaultName -}}&lt;/a&gt;
			{{- end -}}
			&lt;/div&gt;
			{{- if $rightmenu.audio -}}
				&lt;audio id=&#34;audio&#34; src=&#34;https://cdn.jsdelivr.net/gh/lewky/lewky.github.io@master/audio/niconiconi.mp3&#34;&gt;&lt;/audio&gt;
	        {{- end -}}
		  &lt;/div&gt;
	&lt;/div&gt;
	&lt;script type=&#34;text/javascript&#34;&gt;
	var items = document.querySelectorAll(&#39;.menuItem&#39;); 
	for (var i = 0, l = items.length; i &lt; l; i++) {
        items[i].style.left = (50 - 35 * Math.cos( - 0.5 * Math.PI - 2 * (1 / l) * i * Math.PI)).toFixed(4) + &#34;%&#34;;
        items[i].style.top = (50 + 35 * Math.sin( - 0.5 * Math.PI - 2 * (1 / l) * i * Math.PI)).toFixed(4) + &#34;%&#34;
      }
	&lt;/script&gt;
	&lt;link rel=&#34;stylesheet&#34; href=&#34;https://cdn.jsdelivr.net/gh/lewky/lewky.github.io@master/css/GalMenu.css&#34;&gt;
	&lt;script type=&#34;text/javascript&#34; src=&#34;https://cdn.jsdelivr.net/gh/lewky/lewky.github.io@master/js/GalMenu.js&#34;&gt;&lt;/script&gt;
	&lt;script type=&#34;text/javascript&#34;&gt;
    	$(document).ready(function() {
        $(&#39;body&#39;).GalMenu({
          &#39;menu&#39;: &#39;GalDropDown&#39;
        })
      });
	&lt;/script&gt;
{{- end -}}
</code></pre></td></tr></table>
</div>
</div><p>这个模板代码里使用到了我项目里的<code>niconiconi.mp3</code>、<code>GalMenu.css</code>、<code>GalMenu.js</code>这三个文件，有兴趣的可以自己把文件保存到自己网站里，mp3文件可以自己修改为其他的音频文件。</p>
<h3 id="修改assetshtml文件">修改<code>assets.html</code>文件</h3>
<p>将主题的<code>\themes\LoveIt\layouts\partials\assets.html</code>拷贝一份到<code>\layouts\partials\assets.html</code>，在<code>{{- partial &quot;plugin/analytics.html&quot; . -}}</code>下添加如下内容：</p>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre class="chroma"><code><span class="lnt">1
</span><span class="lnt">2
</span><span class="lnt">3
</span></code></pre></td>
<td class="lntd">
<pre class="chroma"><code class="language-fallback" data-lang="fallback">{{- /* 右键菜单 */ -}}
&lt;script type=&#34;text/javascript&#34; src=&#34;https://cdn.jsdelivr.net/npm/jquery@2.1.3/dist/jquery.min.js&#34;&gt;&lt;/script&gt;
{{- partial &#34;plugin/rightmenu.html&#34; . -}}
</code></pre></td></tr></table>
</div>
</div><p>搞定，这个功能就完成了。</p>
<h2 id="添加文章加密功能">添加文章加密功能</h2>
<p>将<code>\themes\LoveIt\layouts\posts\single.html</code>拷贝到<code>\layouts\posts\single.html</code>，打开拷贝后的文件，在<code>{{- $params := .Scratch.Get &quot;params&quot; -}}</code>的下一行添加如下代码：</p>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre class="chroma"><code><span class="lnt"> 1
</span><span class="lnt"> 2
</span><span class="lnt"> 3
</span><span class="lnt"> 4
</span><span class="lnt"> 5
</span><span class="lnt"> 6
</span><span class="lnt"> 7
</span><span class="lnt"> 8
</span><span class="lnt"> 9
</span><span class="lnt">10
</span><span class="lnt">11
</span><span class="lnt">12
</span><span class="lnt">13
</span><span class="lnt">14
</span><span class="lnt">15
</span><span class="lnt">16
</span><span class="lnt">17
</span><span class="lnt">18
</span><span class="lnt">19
</span></code></pre></td>
<td class="lntd">
<pre class="chroma"><code class="language-fallback" data-lang="fallback">    {{- $password := $params.password | default &#34;&#34; -}}
    {{- if ne $password &#34;&#34; -}}
		&lt;script&gt;
			(function(){
				if({{ $password }}){
					if (prompt(&#39;请输入文章密码&#39;) != {{ $password }}){
						alert(&#39;密码错误！&#39;);
						if (history.length === 1) {
							window.opener = null;
							window.open(&#39;&#39;, &#39;_self&#39;);
							window.close();
						} else {
							history.back();
						}
					}
				}
			})();
		&lt;/script&gt;
    {{- end -}}
</code></pre></td></tr></table>
</div>
</div><p>之后只要在文章的头部加上<code>password</code>属性即可进行加密，只有输入了正确密码才能打开文章，否则会回退到之前的页面。用法如下：</p>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre class="chroma"><code><span class="lnt">1
</span><span class="lnt">2
</span><span class="lnt">3
</span><span class="lnt">4
</span></code></pre></td>
<td class="lntd">
<pre class="chroma"><code class="language-fallback" data-lang="fallback">---
title: 随笔
password: test
---
</code></pre></td></tr></table>
</div>
</div><h2 id="添加github-corner">添加GitHub Corner</h2>
<p>将<code>\themes\LoveIt\layouts\partials\header.html</code>拷贝到<code>\layouts\partials\header.html</code>，打开拷贝后的文件，在<code>&lt;div class=&quot;header-wrapper&quot;&gt;</code>的下一行添加一个超链代码：</p>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre class="chroma"><code><span class="lnt">1
</span></code></pre></td>
<td class="lntd">
<pre class="chroma"><code class="language-html" data-lang="html"><span class="p">&lt;</span><span class="nt">a</span> <span class="na">href</span><span class="o">=</span><span class="s">&#34;https://github.com/lewky&#34;</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;github-corner&#34;</span> <span class="na">target</span><span class="o">=</span><span class="s">&#34;_blank&#34;</span> <span class="na">title</span><span class="o">=</span><span class="s">&#34;Follow me on GitHub&#34;</span> <span class="na">aria-label</span><span class="o">=</span><span class="s">&#34;Follow me on GitHub&#34;</span><span class="p">&gt;&lt;</span><span class="nt">svg</span> <span class="na">width</span><span class="o">=</span><span class="s">&#34;3.5rem&#34;</span> <span class="na">height</span><span class="o">=</span><span class="s">&#34;3.5rem&#34;</span> <span class="na">viewBox</span><span class="o">=</span><span class="s">&#34;0 0 250 250&#34;</span> <span class="na">style</span><span class="o">=</span><span class="s">&#34;fill:#70B7FD; color:#fff; position: absolute; top: 0; border: 0; left: 0; transform: scale(-1, 1);&#34;</span> <span class="na">aria-hidden</span><span class="o">=</span><span class="s">&#34;true&#34;</span><span class="p">&gt;&lt;</span><span class="nt">path</span> <span class="na">d</span><span class="o">=</span><span class="s">&#34;M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z&#34;</span><span class="p">&gt;&lt;/</span><span class="nt">path</span><span class="p">&gt;&lt;</span><span class="nt">path</span> <span class="na">d</span><span class="o">=</span><span class="s">&#34;M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2&#34;</span> <span class="na">fill</span><span class="o">=</span><span class="s">&#34;currentColor&#34;</span> <span class="na">style</span><span class="o">=</span><span class="s">&#34;transform-origin: 130px 106px;&#34;</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;octo-arm&#34;</span><span class="p">&gt;&lt;/</span><span class="nt">path</span><span class="p">&gt;&lt;</span><span class="nt">path</span> <span class="na">d</span><span class="o">=</span><span class="s">&#34;M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z&#34;</span> <span class="na">fill</span><span class="o">=</span><span class="s">&#34;currentColor&#34;</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;octo-body&#34;</span><span class="p">&gt;&lt;/</span><span class="nt">path</span><span class="p">&gt;&lt;/</span><span class="nt">svg</span><span class="p">&gt;&lt;/</span><span class="nt">a</span><span class="p">&gt;</span>
</code></pre></td></tr></table>
</div>
</div><p>将上边的超链的href改为自己的GitHub地址，如果想调整图片大小，可以修改代码里的<code>svg</code>标签的<code>width</code>和<code>height</code>属性。</p>
<p>然后是添加样式代码到<code>_custom.scss</code>里：</p>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre class="chroma"><code><span class="lnt"> 1
</span><span class="lnt"> 2
</span><span class="lnt"> 3
</span><span class="lnt"> 4
</span><span class="lnt"> 5
</span><span class="lnt"> 6
</span><span class="lnt"> 7
</span><span class="lnt"> 8
</span><span class="lnt"> 9
</span><span class="lnt">10
</span><span class="lnt">11
</span><span class="lnt">12
</span><span class="lnt">13
</span><span class="lnt">14
</span><span class="lnt">15
</span><span class="lnt">16
</span><span class="lnt">17
</span><span class="lnt">18
</span><span class="lnt">19
</span><span class="lnt">20
</span><span class="lnt">21
</span><span class="lnt">22
</span><span class="lnt">23
</span><span class="lnt">24
</span><span class="lnt">25
</span><span class="lnt">26
</span><span class="lnt">27
</span><span class="lnt">28
</span></code></pre></td>
<td class="lntd">
<pre class="chroma"><code class="language-css" data-lang="css"><span class="c">/* Github Corner */</span>
<span class="p">.</span><span class="nc">github-corner</span><span class="p">:</span><span class="nd">hover</span> <span class="p">.</span><span class="nc">octo-arm</span> <span class="p">{</span>
	<span class="k">animation</span><span class="p">:</span> <span class="n">octocat-wave</span> <span class="mi">560</span><span class="kt">ms</span> <span class="kc">ease</span><span class="o">-</span><span class="n">in-out</span>
<span class="p">}</span>

<span class="p">@</span><span class="k">keyframes</span> <span class="nt">octocat-wave</span> <span class="p">{</span>
	<span class="nt">0</span><span class="o">%,</span><span class="nt">100</span><span class="o">%</span> <span class="p">{</span>
		<span class="k">transform</span><span class="p">:</span> <span class="nb">rotate</span><span class="p">(</span><span class="mi">0</span><span class="p">)</span>
	<span class="p">}</span>

	<span class="nt">20</span><span class="o">%,</span><span class="nt">60</span><span class="o">%</span> <span class="p">{</span>
		<span class="k">transform</span><span class="p">:</span> <span class="nb">rotate</span><span class="p">(</span><span class="mi">-25</span><span class="kt">deg</span><span class="p">)</span>
	<span class="p">}</span>

	<span class="nt">40</span><span class="o">%,</span><span class="nt">80</span><span class="o">%</span> <span class="p">{</span>
		<span class="k">transform</span><span class="p">:</span> <span class="nb">rotate</span><span class="p">(</span><span class="mi">10</span><span class="kt">deg</span><span class="p">)</span>
	<span class="p">}</span>
<span class="p">}</span>

<span class="p">@</span><span class="k">media</span> <span class="o">(</span><span class="nt">max-width</span><span class="p">:</span><span class="nd">500px</span><span class="o">)</span> <span class="p">{</span>
	<span class="p">.</span><span class="nc">github-corner</span><span class="p">:</span><span class="nd">hover</span> <span class="p">.</span><span class="nc">octo-arm</span> <span class="p">{</span>
		<span class="k">animation</span><span class="p">:</span> <span class="kc">none</span>
	<span class="p">}</span>

	<span class="p">.</span><span class="nc">github-corner</span> <span class="p">.</span><span class="nc">octo-arm</span> <span class="p">{</span>
		<span class="k">animation</span><span class="p">:</span> <span class="n">octocat-wave</span> <span class="mi">560</span><span class="kt">ms</span> <span class="kc">ease</span><span class="o">-</span><span class="n">in-out</span>
	<span class="p">}</span>
<span class="p">}</span>
</code></pre></td></tr></table>
</div>
</div><p>下面是GitHub Corner的项目地址，一共有10种颜色样式，随便挑！</p>
<ul>
<li><a href="https://tholman.com/github-corners/" target="_blank" rel="noopener noreffer">GitHub Corners项目地址</a></li>
</ul>
<h2 id="页面下方添加拉姆雷姆快捷跳转">页面下方添加拉姆雷姆快捷跳转</h2>
<p>将<code>\themes\LoveIt\layouts\_default\baseof.html</code>拷贝到<code>\layouts\_default\baseof.html</code>，打开拷贝后的<code>baseof.html</code>，在<code>{{- /* Load JavaScript scripts and CSS */ -}}</code>的上面一行添加如下代码：</p>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre class="chroma"><code><span class="lnt"> 1
</span><span class="lnt"> 2
</span><span class="lnt"> 3
</span><span class="lnt"> 4
</span><span class="lnt"> 5
</span><span class="lnt"> 6
</span><span class="lnt"> 7
</span><span class="lnt"> 8
</span><span class="lnt"> 9
</span><span class="lnt">10
</span><span class="lnt">11
</span><span class="lnt">12
</span></code></pre></td>
<td class="lntd">
<pre class="chroma"><code class="language-fallback" data-lang="fallback">&lt;div class=&#34;sidebar_wo&#34;&gt;
  &lt;div id=&#34;leimu&#34;&gt;
	&lt;img src=&#34;https://cdn.jsdelivr.net/gh/lewky/lewky.github.io@master/images/b2t/leimuA.png&#34; alt=&#34;雷姆&#34; 
	onmouseover=&#34;this.src=&#39;https://cdn.jsdelivr.net/gh/lewky/lewky.github.io@master/images/b2t/leimuB.png&#39;&#34; 
	onmouseout=&#34;this.src=&#39;https://cdn.jsdelivr.net/gh/lewky/lewky.github.io@master/images/b2t/leimuA.png&#39;&#34; title=&#34;回到顶部&#34;&gt;
  &lt;/div&gt;
  &lt;div class=&#34;sidebar_wo&#34; id=&#34;lamu&#34;&gt;
	&lt;img src=&#34;https://cdn.jsdelivr.net/gh/lewky/lewky.github.io@master/images/b2t/lamuA.png&#34; alt=&#34;雷姆&#34; 
	onmouseover=&#34;this.src=&#39;https://cdn.jsdelivr.net/gh/lewky/lewky.github.io@master/images/b2t/lamuB.png&#39;&#34; 
	onmouseout=&#34;this.src=&#39;https://cdn.jsdelivr.net/gh/lewky/lewky.github.io@master/images/b2t/lamuA.png&#39;&#34; title=&#34;回到底部&#34;&gt;
  &lt;/div&gt;
&lt;/div&gt;
</code></pre></td></tr></table>
</div>
</div><p>在<code>_custom.scss</code>里添加对应的css代码：</p>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre class="chroma"><code><span class="lnt"> 1
</span><span class="lnt"> 2
</span><span class="lnt"> 3
</span><span class="lnt"> 4
</span><span class="lnt"> 5
</span><span class="lnt"> 6
</span><span class="lnt"> 7
</span><span class="lnt"> 8
</span><span class="lnt"> 9
</span><span class="lnt">10
</span><span class="lnt">11
</span><span class="lnt">12
</span><span class="lnt">13
</span><span class="lnt">14
</span><span class="lnt">15
</span><span class="lnt">16
</span><span class="lnt">17
</span><span class="lnt">18
</span><span class="lnt">19
</span><span class="lnt">20
</span><span class="lnt">21
</span><span class="lnt">22
</span><span class="lnt">23
</span><span class="lnt">24
</span><span class="lnt">25
</span><span class="lnt">26
</span><span class="lnt">27
</span><span class="lnt">28
</span><span class="lnt">29
</span><span class="lnt">30
</span><span class="lnt">31
</span><span class="lnt">32
</span><span class="lnt">33
</span><span class="lnt">34
</span><span class="lnt">35
</span><span class="lnt">36
</span><span class="lnt">37
</span><span class="lnt">38
</span></code></pre></td>
<td class="lntd">
<pre class="chroma"><code class="language-css" data-lang="css"><span class="c">/* 拉姆蕾姆回到顶部或底部按钮 */</span>
<span class="p">.</span><span class="nc">sidebar_wo</span> <span class="p">{</span>
    <span class="k">position</span><span class="p">:</span><span class="kc">fixed</span><span class="p">;</span>
    <span class="k">line-height</span><span class="p">:</span><span class="mi">0</span><span class="p">;</span>
    <span class="k">bottom</span><span class="p">:</span><span class="mi">0</span><span class="p">;</span>
    <span class="k">z-index</span><span class="p">:</span><span class="mi">1000</span>
<span class="p">}</span>
<span class="p">#</span><span class="nn">leimu</span> <span class="p">{</span>
    <span class="k">left</span><span class="p">:</span><span class="mi">0</span><span class="p">;</span>
    <span class="kp">-webkit-</span><span class="k">transition</span><span class="p">:</span><span class="kc">all</span> <span class="mf">.3</span><span class="kt">s</span> <span class="kc">ease</span><span class="o">-</span><span class="n">in-out</span><span class="p">;</span>
    <span class="k">transition</span><span class="p">:</span><span class="kc">all</span> <span class="mf">.3</span><span class="kt">s</span> <span class="kc">ease</span><span class="o">-</span><span class="n">in-out</span><span class="p">;</span>
    <span class="kp">-webkit-</span><span class="k">transform</span><span class="p">:</span><span class="nb">translate</span><span class="p">(</span><span class="mi">-7</span><span class="kt">px</span><span class="p">,</span><span class="mi">7</span><span class="kt">px</span><span class="p">);</span>
    <span class="kp">-ms-</span><span class="k">transform</span><span class="p">:</span><span class="nb">translate</span><span class="p">(</span><span class="mi">-7</span><span class="kt">px</span><span class="p">,</span><span class="mi">7</span><span class="kt">px</span><span class="p">);</span>
    <span class="k">transform</span><span class="p">:</span><span class="nb">translate</span><span class="p">(</span><span class="mi">-7</span><span class="kt">px</span><span class="p">,</span><span class="mi">7</span><span class="kt">px</span><span class="p">)</span>
<span class="p">}</span>
<span class="p">#</span><span class="nn">lamu</span> <span class="p">{</span>
    <span class="kp">-webkit-</span><span class="k">transition</span><span class="p">:</span><span class="kc">all</span> <span class="mf">.3</span><span class="kt">s</span> <span class="kc">ease</span><span class="o">-</span><span class="n">in-out</span><span class="p">;</span><span class="k">transition</span><span class="p">:</span><span class="kc">all</span> <span class="mf">.3</span><span class="kt">s</span> <span class="kc">ease</span><span class="o">-</span><span class="n">in-out</span><span class="p">;</span>
    <span class="kp">-webkit-</span><span class="k">transform</span><span class="p">:</span><span class="nb">translate</span><span class="p">(</span><span class="mi">7</span><span class="kt">px</span><span class="p">,</span><span class="mi">7</span><span class="kt">px</span><span class="p">);</span>
    <span class="kp">-ms-</span><span class="k">transform</span><span class="p">:</span><span class="nb">translate</span><span class="p">(</span><span class="mi">7</span><span class="kt">px</span><span class="p">,</span><span class="mi">7</span><span class="kt">px</span><span class="p">);</span>
    <span class="k">transform</span><span class="p">:</span><span class="nb">translate</span><span class="p">(</span><span class="mi">7</span><span class="kt">px</span><span class="p">,</span><span class="mi">7</span><span class="kt">px</span><span class="p">);</span>
    <span class="k">right</span><span class="p">:</span><span class="mi">0</span>
<span class="p">}</span>
<span class="p">#</span><span class="nn">leimu</span><span class="p">:</span><span class="nd">hover</span> <span class="p">{</span>
    <span class="kp">-webkit-</span><span class="k">transform</span><span class="p">:</span><span class="nb">translate</span><span class="p">(</span><span class="mi">0</span><span class="p">,</span><span class="mi">0</span><span class="p">);</span>
    <span class="kp">-ms-</span><span class="k">transform</span><span class="p">:</span><span class="nb">translate</span><span class="p">(</span><span class="mi">0</span><span class="p">,</span><span class="mi">0</span><span class="p">);</span>
    <span class="k">transform</span><span class="p">:</span><span class="nb">translate</span><span class="p">(</span><span class="mi">0</span><span class="p">,</span><span class="mi">0</span><span class="p">)</span>
<span class="p">}</span>
<span class="p">#</span><span class="nn">lamu</span><span class="p">:</span><span class="nd">hover</span> <span class="p">{</span>
    <span class="kp">-webkit-</span><span class="k">transform</span><span class="p">:</span><span class="nb">translate</span><span class="p">(</span><span class="mi">0</span><span class="p">,</span><span class="mi">0</span><span class="p">);</span>
    <span class="kp">-ms-</span><span class="k">transform</span><span class="p">:</span><span class="nb">translate</span><span class="p">(</span><span class="mi">0</span><span class="p">,</span><span class="mi">0</span><span class="p">);</span>
    <span class="k">transform</span><span class="p">:</span><span class="nb">translate</span><span class="p">(</span><span class="mi">0</span><span class="p">,</span><span class="mi">0</span><span class="p">)</span>
<span class="p">}</span>
<span class="p">.</span><span class="nc">sidebar_wo</span> <span class="nt">img</span> <span class="p">{</span>
    <span class="k">cursor</span><span class="p">:</span><span class="kc">pointer</span><span class="p">;</span>
<span class="p">}</span>
<span class="p">@</span><span class="k">media</span> <span class="nt">only</span> <span class="nt">screen</span> <span class="nt">and</span> <span class="o">(</span><span class="nt">max-width</span><span class="p">:</span><span class="nd">1024px</span><span class="o">)</span> <span class="p">{</span>
    <span class="p">.</span><span class="nc">sidebar_wo</span><span class="p">{</span><span class="k">display</span><span class="p">:</span><span class="kc">none</span><span class="p">}</span>
<span class="p">}</span>
</code></pre></td></tr></table>
</div>
</div><p>最后在<code>custom.js</code>里添加如下代码，注意，要先引入<code>jquery</code>才有效果，具体细节请看前文：</p>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre class="chroma"><code><span class="lnt"> 1
</span><span class="lnt"> 2
</span><span class="lnt"> 3
</span><span class="lnt"> 4
</span><span class="lnt"> 5
</span><span class="lnt"> 6
</span><span class="lnt"> 7
</span><span class="lnt"> 8
</span><span class="lnt"> 9
</span><span class="lnt">10
</span><span class="lnt">11
</span></code></pre></td>
<td class="lntd">
<pre class="chroma"><code class="language-fallback" data-lang="fallback">/* 拉姆蕾姆回到顶部或底部按钮 */
$(function() {
	$(&#34;#lamu img&#34;).eq(0).click(function() {
		$(&#34;html,body&#34;).animate({scrollTop:$(document).height()},800);
		return false;
	});
	$(&#34;#leimu img&#34;).eq(0).click(function() {
		$(&#34;html,body&#34;).animate({scrollTop:0},800);
		return false;
	});
});
</code></pre></td></tr></table>
</div>
</div><h2 id="添加首页头像挂件">添加首页头像挂件</h2>
<p>这个功能分为四个部分：</p>
<ul>
<li>首页头像的动画特效从浮动改为旋转，为了适配挂件还稍微缩小了头像大小</li>
<li>添加头像挂件（都是b站的挂件）</li>
<li>点击头像一点次数后随机刷新头像</li>
<li>加载首页时随机刷新头像（该功能可禁用）</li>
</ul>
<h3 id="修改站点配置文件">修改站点配置文件</h3>
<p>在站点配置文件里找到你配置首页头像的变量<code>avatarURL</code>，在其下方添加两个新的变量，内容如下：</p>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre class="chroma"><code><span class="lnt"> 1
</span><span class="lnt"> 2
</span><span class="lnt"> 3
</span><span class="lnt"> 4
</span><span class="lnt"> 5
</span><span class="lnt"> 6
</span><span class="lnt"> 7
</span><span class="lnt"> 8
</span><span class="lnt"> 9
</span><span class="lnt">10
</span><span class="lnt">11
</span><span class="lnt">12
</span></code></pre></td>
<td class="lntd">
<pre class="chroma"><code class="language-fallback" data-lang="fallback">      [params.home.profile]
        enable = true
        # 主页显示头像的 URL
        avatarURL = &#34;/images/avatar.jpg&#34;
        # 是否启用头像挂件
        avatarPluginURL = &#34;/images/avatar-plug/bilibili_27.png&#34;
        # 是否启用头像挂件自动刷新
        avatarPluginFlush = true
        # 点击频率，点击几次就换挂件
        avatarPluginFrequency = 1
        # 头像挂件总数
        avatarPluginCount = 128
</code></pre></td></tr></table>
</div>
</div><p>如果你有自己的图床，还可以配置一个给头像挂件使用的图床地址，如下：</p>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre class="chroma"><code><span class="lnt">1
</span><span class="lnt">2
</span><span class="lnt">3
</span><span class="lnt">4
</span></code></pre></td>
<td class="lntd">
<pre class="chroma"><code class="language-fallback" data-lang="fallback"># 参数
[params]
  # 图床变量，末尾不需要加/
  cdnPrefix = &#34;https://cdn.jsdelivr.net/gh/lewky/lewky.github.io@master&#34;
</code></pre></td></tr></table>
</div>
</div><p>这个变量不设置也没关系，不会影响挂件的功能。</p>
<h3 id="修改模板文件profilehtml">修改模板文件profile.html</h3>
<p>将<code>\themes\LoveIt\layouts\partials\home\profile.html</code>拷贝到<code>\layouts\partials\home\profile.html</code>，打开拷贝后的文件，找到下面的代码：</p>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre class="chroma"><code><span class="lnt">1
</span><span class="lnt">2
</span><span class="lnt">3
</span></code></pre></td>
<td class="lntd">
<pre class="chroma"><code class="language-fallback" data-lang="fallback">&lt;a href=&#34;{{ $url }}&#34;{{ with .Title | default .Name }} title=&#34;{{ . }}&#34;{{ end }}{{ if (urls.Parse $url).Host }} rel=&#34;noopener noreffer&#34; target=&#34;_blank&#34;{{ end }}&gt;
    {{- dict &#34;Src&#34; $avatar | partial &#34;plugin/image.html&#34; -}}
&lt;/a&gt;
</code></pre></td></tr></table>
</div>
</div><p>这是渲染首页头像的代码，将这段代码改成如下内容：</p>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre class="chroma"><code><span class="lnt"> 1
</span><span class="lnt"> 2
</span><span class="lnt"> 3
</span><span class="lnt"> 4
</span><span class="lnt"> 5
</span><span class="lnt"> 6
</span><span class="lnt"> 7
</span><span class="lnt"> 8
</span><span class="lnt"> 9
</span><span class="lnt">10
</span></code></pre></td>
<td class="lntd">
<pre class="chroma"><code class="language-fallback" data-lang="fallback">{{- if $profile.avatarPluginURL -}}
	&lt;img class=&#34;site-avatar-plug-bilibili&#34; /&gt;
	&lt;a href=&#34;javascript:void(0);&#34;{{ with .Title | default .Name }} title=&#34;Please click me~~&#34;{{ end }}{{ if (urls.Parse $url).Host }} rel=&#34;noopener noreffer&#34; target=&#34;_blank&#34;{{ end }}&gt;
		{{- dict &#34;Src&#34; $avatar &#34;Title&#34; &#34;Please click me~~&#34; | partial &#34;plugin/image.html&#34; -}}
	&lt;/a&gt;
{{- else -}}
	&lt;a href=&#34;{{ $url }}&#34;{{ with .Title | default .Name }} title=&#34;{{ . }}&#34;{{ end }}{{ if (urls.Parse $url).Host }} rel=&#34;noopener noreffer&#34; target=&#34;_blank&#34;{{ end }}&gt;
		{{- dict &#34;Src&#34; $avatar | partial &#34;plugin/image.html&#34; -}}
	&lt;/a&gt;
{{- end -}}
</code></pre></td></tr></table>
</div>
</div><h3 id="修改模板文件assetshtml">修改模板文件assets.html</h3>
<p>打开<code>\layouts\partials\assets.html</code>，在你引入的<code>jquery</code>的下面添加如下代码，不知道怎么引入<code>jquery</code>的请看前文：</p>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre class="chroma"><code><span class="lnt"> 1
</span><span class="lnt"> 2
</span><span class="lnt"> 3
</span><span class="lnt"> 4
</span><span class="lnt"> 5
</span><span class="lnt"> 6
</span><span class="lnt"> 7
</span><span class="lnt"> 8
</span><span class="lnt"> 9
</span><span class="lnt">10
</span><span class="lnt">11
</span><span class="lnt">12
</span><span class="lnt">13
</span><span class="lnt">14
</span><span class="lnt">15
</span><span class="lnt">16
</span><span class="lnt">17
</span><span class="lnt">18
</span><span class="lnt">19
</span><span class="lnt">20
</span><span class="lnt">21
</span><span class="lnt">22
</span><span class="lnt">23
</span><span class="lnt">24
</span><span class="lnt">25
</span><span class="lnt">26
</span><span class="lnt">27
</span><span class="lnt">28
</span><span class="lnt">29
</span><span class="lnt">30
</span><span class="lnt">31
</span><span class="lnt">32
</span><span class="lnt">33
</span><span class="lnt">34
</span><span class="lnt">35
</span><span class="lnt">36
</span><span class="lnt">37
</span><span class="lnt">38
</span><span class="lnt">39
</span><span class="lnt">40
</span><span class="lnt">41
</span></code></pre></td>
<td class="lntd">
<pre class="chroma"><code class="language-fallback" data-lang="fallback">&lt;!-- 头像挂件 --&gt;
&lt;script&gt;
{{- $profile := .Site.Params.home.profile -}}
{{- $avatarPlugin := $profile.avatarPluginURL -}}
{{- $avatarPluginFrequency := $profile.avatarPluginFrequency -}}
{{- $avatarPluginCount := $profile.avatarPluginCount -}}
{{- $cdnPrefix := .Site.Params.cdnPrefix -}}
{{- if $avatarPlugin -}}
	/* 头像挂件自动刷新 */
	{{- if $profile.avatarPluginFlush -}}
		$(function () {
			$(&#34;.site-avatar-plug-bilibili&#34;).attr(&#34;src&#34;, &#34;{{ $cdnPrefix }}/images/avatar-plug/bilibili_&#34; + (~~({{ $avatarPluginCount }}*Math.random())+1) + &#34;.png&#34;);
		});
	{{- else -}}
		$(function () {
			$(&#34;.site-avatar-plug-bilibili&#34;).attr(&#34;src&#34;, &#34;{{ $cdnPrefix }}{{ $avatarPlugin }}&#34;);
		});
	{{- end -}}
	
	/* 点击头像更换b站挂件 */
	var avatar_plug = 0;
	var avatar_click = 1;
	jQuery(document).ready(function($) {
		/* 点击频率，点击几次就换挂件 */
		var frequency = {{ $avatarPluginFrequency }};
		/* 头像挂件总数 */
		var plug_count = {{ $avatarPluginCount }};
		$(&#34;div.home-avatar a&#34;).click(function(e) {
			if (avatar_click % frequency === 0) {
				avatar_plug ++;
				$(&#34;.site-avatar-plug-bilibili&#34;).attr(&#34;src&#34;, &#34;{{ $cdnPrefix }}/images/avatar-plug/bilibili_&#34; + avatar_plug + &#34;.png&#34;);
			}		
			if (avatar_plug === plug_count) {
				avatar_plug = 0;
			}
			$(&#34;div.home-avatar a&#34;).attr(&#34;alt&#34;,&#34;再点击&#34; + (frequency - avatar_click % frequency) + &#34;次头像试试看~~&#34;);
			avatar_click ++;
		});
	});
{{- end -}}
&lt;/script&gt;
</code></pre></td></tr></table>
</div>
</div><h3 id="添加css代码">添加css代码</h3>
<p>在自定义的<code>_custom.scss</code>里添加如下代码：</p>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre class="chroma"><code><span class="lnt"> 1
</span><span class="lnt"> 2
</span><span class="lnt"> 3
</span><span class="lnt"> 4
</span><span class="lnt"> 5
</span><span class="lnt"> 6
</span><span class="lnt"> 7
</span><span class="lnt"> 8
</span><span class="lnt"> 9
</span><span class="lnt">10
</span><span class="lnt">11
</span><span class="lnt">12
</span><span class="lnt">13
</span><span class="lnt">14
</span><span class="lnt">15
</span><span class="lnt">16
</span><span class="lnt">17
</span><span class="lnt">18
</span><span class="lnt">19
</span><span class="lnt">20
</span><span class="lnt">21
</span><span class="lnt">22
</span><span class="lnt">23
</span><span class="lnt">24
</span><span class="lnt">25
</span><span class="lnt">26
</span><span class="lnt">27
</span><span class="lnt">28
</span><span class="lnt">29
</span><span class="lnt">30
</span><span class="lnt">31
</span><span class="lnt">32
</span><span class="lnt">33
</span><span class="lnt">34
</span><span class="lnt">35
</span><span class="lnt">36
</span><span class="lnt">37
</span><span class="lnt">38
</span><span class="lnt">39
</span><span class="lnt">40
</span><span class="lnt">41
</span><span class="lnt">42
</span><span class="lnt">43
</span><span class="lnt">44
</span><span class="lnt">45
</span><span class="lnt">46
</span><span class="lnt">47
</span><span class="lnt">48
</span><span class="lnt">49
</span><span class="lnt">50
</span><span class="lnt">51
</span><span class="lnt">52
</span><span class="lnt">53
</span><span class="lnt">54
</span><span class="lnt">55
</span><span class="lnt">56
</span><span class="lnt">57
</span><span class="lnt">58
</span><span class="lnt">59
</span><span class="lnt">60
</span><span class="lnt">61
</span><span class="lnt">62
</span><span class="lnt">63
</span><span class="lnt">64
</span><span class="lnt">65
</span><span class="lnt">66
</span><span class="lnt">67
</span></code></pre></td>
<td class="lntd">
<pre class="chroma"><code class="language-css" data-lang="css"><span class="c">/* 首页头像 */</span>
<span class="c">/* bilibili头像挂件 */</span>
<span class="nt">img</span><span class="p">.</span><span class="nc">site-avatar-plug-bilibili</span> <span class="p">{</span>
    <span class="k">position</span><span class="p">:</span> <span class="kc">absolute</span><span class="p">;</span>
    <span class="k">display</span><span class="p">:</span> <span class="kc">block</span><span class="p">;</span>
    <span class="k">margin</span><span class="p">:</span> <span class="mi">-2</span><span class="kt">rem</span> <span class="cp">!important</span><span class="p">;</span>
    <span class="k">padding</span><span class="p">:</span> <span class="mi">0</span><span class="p">;</span>
    <span class="k">width</span><span class="p">:</span> <span class="mi">9</span><span class="kt">rem</span> <span class="cp">!important</span><span class="p">;</span>
    <span class="k">max-width</span><span class="p">:</span> <span class="mi">168</span><span class="kt">px</span><span class="p">;</span>
    <span class="k">height</span><span class="p">:</span> <span class="kc">auto</span><span class="p">;</span>
    <span class="k">box-shadow</span><span class="p">:</span> <span class="kc">none</span> <span class="cp">!important</span><span class="p">;</span>
    <span class="k">z-index</span><span class="p">:</span> <span class="mi">1</span><span class="p">;</span>
    <span class="n">pointer-events</span><span class="p">:</span> <span class="kc">none</span><span class="p">;</span>
<span class="p">}</span>

<span class="c">/* 头像旋转 */</span>
<span class="p">.</span><span class="nc">home</span> <span class="p">.</span><span class="nc">home-profile</span> <span class="p">.</span><span class="nc">home-avatar</span> <span class="nt">img</span> <span class="p">{</span>
    <span class="k">width</span><span class="p">:</span> <span class="mi">5</span><span class="kt">rem</span><span class="p">;</span>

  <span class="c">/* 设置循环动画
</span><span class="c">  [animation: 
</span><span class="c">	(play)动画名称
</span><span class="c">	(2s)动画播放时长单位秒或微秒
</span><span class="c">	(ease-out)动画播放的速度曲线为以低速结束 
</span><span class="c">	(1s)等待1秒然后开始动画
</span><span class="c">	(1)动画播放次数(infinite为循环播放) ]*/</span>
 
  <span class="c">/* 鼠标经过头像旋转360度 */</span>
  <span class="kp">-webkit-</span><span class="k">transition</span><span class="p">:</span> <span class="kp">-webkit-</span><span class="k">transform</span> <span class="mf">1.0</span><span class="kt">s</span> <span class="kc">ease</span><span class="o">-</span><span class="n">out</span><span class="p">;</span>
  <span class="kp">-moz-</span><span class="k">transition</span><span class="p">:</span> <span class="kp">-moz-</span><span class="k">transform</span> <span class="mf">1.0</span><span class="kt">s</span> <span class="kc">ease</span><span class="o">-</span><span class="n">out</span><span class="p">;</span>
  <span class="k">transition</span><span class="p">:</span> <span class="k">transform</span> <span class="mf">1.0</span><span class="kt">s</span> <span class="kc">ease</span><span class="o">-</span><span class="n">out</span><span class="p">;</span>
    <span class="err">&amp;:hover</span> <span class="err">{</span>
      <span class="c">/* 鼠标经过停止头像旋转 
</span><span class="c">      -webkit-animation-play-state:paused;
</span><span class="c">      animation-play-state:paused;*/</span>

      <span class="c">/* 鼠标经过头像旋转360度 */</span>
      <span class="kp">-webkit-</span><span class="k">transform</span><span class="p">:</span> <span class="nb">rotateZ</span><span class="p">(</span><span class="mi">360</span><span class="kt">deg</span><span class="p">);</span>
      <span class="kp">-moz-</span><span class="k">transform</span><span class="p">:</span> <span class="nb">rotateZ</span><span class="p">(</span><span class="mi">360</span><span class="kt">deg</span><span class="p">);</span>
      <span class="k">transform</span><span class="p">:</span> <span class="nb">rotateZ</span><span class="p">(</span><span class="mi">360</span><span class="kt">deg</span><span class="p">);</span>
    <span class="p">}</span>
<span class="err">}</span>
<span class="c">/* Z 轴旋转动画 */</span>
<span class="p">@</span><span class="k">-webkit-keyframes</span> <span class="nt">play</span> <span class="p">{</span>
  <span class="nt">0</span><span class="o">%</span> <span class="p">{</span>
    <span class="kp">-webkit-</span><span class="k">transform</span><span class="p">:</span> <span class="nb">rotateZ</span><span class="p">(</span><span class="mi">0</span><span class="kt">deg</span><span class="p">);</span>
  <span class="p">}</span>
  <span class="nt">100</span><span class="o">%</span> <span class="p">{</span>
    <span class="kp">-webkit-</span><span class="k">transform</span><span class="p">:</span> <span class="nb">rotateZ</span><span class="p">(</span><span class="mi">-360</span><span class="kt">deg</span><span class="p">);</span>
  <span class="p">}</span>
<span class="p">}</span>
<span class="p">@</span><span class="k">-moz-keyframes</span> <span class="nt">play</span> <span class="p">{</span>
  <span class="nt">0</span><span class="o">%</span> <span class="p">{</span>
    <span class="kp">-moz-</span><span class="k">transform</span><span class="p">:</span> <span class="nb">rotateZ</span><span class="p">(</span><span class="mi">0</span><span class="kt">deg</span><span class="p">);</span>
  <span class="p">}</span>
  <span class="nt">100</span><span class="o">%</span> <span class="p">{</span>
    <span class="kp">-moz-</span><span class="k">transform</span><span class="p">:</span> <span class="nb">rotateZ</span><span class="p">(</span><span class="mi">-360</span><span class="kt">deg</span><span class="p">);</span>
  <span class="p">}</span>
<span class="p">}</span>
<span class="p">@</span><span class="k">keyframes</span> <span class="nt">play</span> <span class="p">{</span>
  <span class="nt">0</span><span class="o">%</span> <span class="p">{</span>
    <span class="k">transform</span><span class="p">:</span> <span class="nb">rotateZ</span><span class="p">(</span><span class="mi">0</span><span class="kt">deg</span><span class="p">);</span>
  <span class="p">}</span>
  <span class="nt">100</span><span class="o">%</span> <span class="p">{</span>
    <span class="k">transform</span><span class="p">:</span> <span class="nb">rotateZ</span><span class="p">(</span><span class="mi">-360</span><span class="kt">deg</span><span class="p">);</span>
  <span class="p">}</span>
<span class="p">}</span>
</code></pre></td></tr></table>
</div>
</div><p>头像和挂件的样式代码可能根据个人的定制化而需要微调下位置之类的。至于头像挂件这些图片请去我的站点里下载下来，下面是具体地址：
<a href="https://github.com/lewky/lewky.github.io/tree/master/images/avatar-plug">https://github.com/lewky/lewky.github.io/tree/master/images/avatar-plug</a></p>
<h2 id="添加归档分类页面里的文章数量统计">添加归档、分类页面里的文章数量统计</h2>
<h3 id="在listhtml里添加sup标签">在list.html里添加<code>sup</code>标签</h3>
<p>文章数量统计实际上就是添加html里的<code>sup</code>标签，借助hugo提供的变量来获取对应的文章数量，即可实现该功能。</p>
<p>拷贝<code>\themes\LoveIt\layouts\taxonomy\list.html</code>到<code>\layouts\taxonomy\list.html</code>，打开拷贝后的文件，找到如下内容：</p>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre class="chroma"><code><span class="lnt">1
</span><span class="lnt">2
</span><span class="lnt">3
</span><span class="lnt">4
</span><span class="lnt">5
</span></code></pre></td>
<td class="lntd">
<pre class="chroma"><code class="language-fallback" data-lang="fallback">{{- if eq $taxonomy &#34;category&#34; -}}
    &lt;i class=&#34;far fa-folder-open fa-fw&#34;&gt;&lt;/i&gt;&amp;nbsp;{{ .Title }}
{{- else if eq $taxonomy &#34;tag&#34; -}}
    &lt;i class=&#34;fas fa-tag fa-fw&#34;&gt;&lt;/i&gt;&amp;nbsp;{{ .Title }}
{{- else -}}
</code></pre></td></tr></table>
</div>
</div><p>改成如下：</p>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre class="chroma"><code><span class="lnt">1
</span><span class="lnt">2
</span><span class="lnt">3
</span><span class="lnt">4
</span><span class="lnt">5
</span></code></pre></td>
<td class="lntd">
<pre class="chroma"><code class="language-fallback" data-lang="fallback">{{- if eq $taxonomy &#34;category&#34; -}}
    &lt;i class=&#34;far fa-folder-open fa-fw&#34;&gt;&lt;/i&gt;&amp;nbsp;{{ .Title }}&lt;sup&gt;{{ len .Pages }}&lt;/sup&gt;
{{- else if eq $taxonomy &#34;tag&#34; -}}
    &lt;i class=&#34;fas fa-tag fa-fw&#34;&gt;&lt;/i&gt;&amp;nbsp;{{ .Title }}&lt;sup&gt;{{ len .Pages }}&lt;/sup&gt;
{{- else -}}
</code></pre></td></tr></table>
</div>
</div><p>继续找到如下内容：</p>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre class="chroma"><code><span class="lnt">1
</span><span class="lnt">2
</span></code></pre></td>
<td class="lntd">
<pre class="chroma"><code class="language-fallback" data-lang="fallback">{{- range $pages.PageGroups -}}
    &lt;h3 class=&#34;group-title&#34;&gt;{{ .Key }}&lt;/h3&gt;
</code></pre></td></tr></table>
</div>
</div><p>改成如下：</p>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre class="chroma"><code><span class="lnt">1
</span><span class="lnt">2
</span></code></pre></td>
<td class="lntd">
<pre class="chroma"><code class="language-fallback" data-lang="fallback">{{- range $pages.PageGroups -}}
    &lt;h3 class=&#34;group-title&#34;&gt;{{ .Key }} &lt;sup&gt;{{ len .Pages }}&lt;/sup&gt;&lt;/h3&gt;
</code></pre></td></tr></table>
</div>
</div><p>原本主题的文章是按照年份来分组的，如果想按照月份来分组，找到下面的内容：</p>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre class="chroma"><code><span class="lnt">1
</span><span class="lnt">2
</span><span class="lnt">3
</span></code></pre></td>
<td class="lntd">
<pre class="chroma"><code class="language-fallback" data-lang="fallback">{{- /* Paginate */ -}}
{{- if .Pages -}}
    {{- $pages := .Pages.GroupByDate &#34;2006&#34; -}}
</code></pre></td></tr></table>
</div>
</div><p>改成如下：</p>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre class="chroma"><code><span class="lnt">1
</span><span class="lnt">2
</span><span class="lnt">3
</span></code></pre></td>
<td class="lntd">
<pre class="chroma"><code class="language-fallback" data-lang="fallback">{{- /* Paginate */ -}}
{{- if .Pages -}}
    {{- $pages := .Pages.GroupByDate &#34;2006-01&#34; -}}
</code></pre></td></tr></table>
</div>
</div><h3 id="在termshtml里添加sup标签">在terms.html里添加<code>sup</code>标签</h3>
<p>拷贝<code>\themes\LoveIt\layouts\taxonomy\terms.html</code>到<code>\layouts\taxonomy\terms.html</code>，打开拷贝后的文件，找到如下内容：</p>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre class="chroma"><code><span class="lnt">1
</span><span class="lnt">2
</span><span class="lnt">3
</span><span class="lnt">4
</span><span class="lnt">5
</span></code></pre></td>
<td class="lntd">
<pre class="chroma"><code class="language-fallback" data-lang="fallback">&lt;div class=&#34;page archive&#34;&gt;
    {{- /* Title */ -}}
    &lt;h2 class=&#34;single-title animated pulse faster&#34;&gt;
        {{- .Params.Title | default (T $taxonomies) | default $taxonomies | dict &#34;Some&#34; | T &#34;allSome&#34; -}}
    &lt;/h2&gt;
</code></pre></td></tr></table>
</div>
</div><p>改成如下：</p>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre class="chroma"><code><span class="lnt">1
</span><span class="lnt">2
</span><span class="lnt">3
</span><span class="lnt">4
</span><span class="lnt">5
</span></code></pre></td>
<td class="lntd">
<pre class="chroma"><code class="language-fallback" data-lang="fallback">&lt;div class=&#34;page archive&#34;&gt;
    {{- /* Title */ -}}
    &lt;h2 class=&#34;single-title animated pulse faster&#34;&gt;
        {{- .Params.Title | default (T $taxonomies) | default $taxonomies | dict &#34;Some&#34; | T &#34;allSome&#34; -}}&lt;sup&gt;{{ len .Pages }}&lt;/sup&gt;
    &lt;/h2&gt;
</code></pre></td></tr></table>
</div>
</div><p>找到如下内容：</p>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre class="chroma"><code><span class="lnt">1
</span><span class="lnt">2
</span><span class="lnt">3
</span><span class="lnt">4
</span><span class="lnt">5
</span></code></pre></td>
<td class="lntd">
<pre class="chroma"><code class="language-fallback" data-lang="fallback">&lt;h3 class=&#34;card-item-title&#34;&gt;
    &lt;a href=&#34;{{ .RelPermalink }}&#34;&gt;
        &lt;i class=&#34;far fa-folder fa-fw&#34;&gt;&lt;/i&gt;&amp;nbsp;{{ .Page.Title }}
    &lt;/a&gt;
&lt;/h3&gt;
</code></pre></td></tr></table>
</div>
</div><p>改成如下：</p>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre class="chroma"><code><span class="lnt">1
</span><span class="lnt">2
</span><span class="lnt">3
</span><span class="lnt">4
</span><span class="lnt">5
</span></code></pre></td>
<td class="lntd">
<pre class="chroma"><code class="language-fallback" data-lang="fallback">&lt;h3 class=&#34;card-item-title&#34;&gt;
    &lt;a href=&#34;{{ .RelPermalink }}&#34;&gt;
        &lt;i class=&#34;far fa-folder fa-fw&#34;&gt;&lt;/i&gt;&amp;nbsp;{{ .Page.Title }} &lt;sup&gt;{{ len .Pages }}&lt;/sup&gt;
    &lt;/a&gt;
&lt;/h3&gt;
</code></pre></td></tr></table>
</div>
</div><h3 id="在sectionhtml里添加sup标签">在section.html里添加<code>sup</code>标签</h3>
<p>拷贝<code>\themes\LoveIt\layouts\_default\section.html</code>到<code>\layouts\_default\section.html</code>，打开拷贝后的文件，找到如下内容：</p>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre class="chroma"><code><span class="lnt">1
</span><span class="lnt">2
</span><span class="lnt">3
</span><span class="lnt">4
</span><span class="lnt">5
</span></code></pre></td>
<td class="lntd">
<pre class="chroma"><code class="language-fallback" data-lang="fallback">&lt;div class=&#34;page archive&#34;&gt;
    {{- /* Title */ -}}
    &lt;h2 class=&#34;single-title animated pulse faster&#34;&gt;
        {{- .Params.Title | default (T .Section) | default .Section | dict &#34;Some&#34; | T &#34;allSome&#34; -}}
    &lt;/h2&gt;
</code></pre></td></tr></table>
</div>
</div><p>改成如下：</p>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre class="chroma"><code><span class="lnt">1
</span><span class="lnt">2
</span><span class="lnt">3
</span><span class="lnt">4
</span><span class="lnt">5
</span></code></pre></td>
<td class="lntd">
<pre class="chroma"><code class="language-fallback" data-lang="fallback">&lt;div class=&#34;page archive&#34;&gt;
    {{- /* Title */ -}}
    &lt;h2 class=&#34;single-title animated pulse faster&#34;&gt;
        {{- .Params.Title | default (T .Section) | default .Section | dict &#34;Some&#34; | T &#34;allSome&#34; -}}&lt;sup&gt;{{ len .Pages }}&lt;/sup&gt;
    &lt;/h2&gt;
</code></pre></td></tr></table>
</div>
</div><p>找到如下内容：</p>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre class="chroma"><code><span class="lnt">1
</span><span class="lnt">2
</span></code></pre></td>
<td class="lntd">
<pre class="chroma"><code class="language-fallback" data-lang="fallback">{{- range $pages.PageGroups -}}
            &lt;h3 class=&#34;group-title&#34;&gt;{{ .Key }}&lt;/h3&gt;
</code></pre></td></tr></table>
</div>
</div><p>改成如下：</p>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre class="chroma"><code><span class="lnt">1
</span><span class="lnt">2
</span></code></pre></td>
<td class="lntd">
<pre class="chroma"><code class="language-fallback" data-lang="fallback">{{- range $pages.PageGroups -}}
    &lt;h3 class=&#34;group-title&#34;&gt;{{ .Key }} &lt;sup&gt;{{ len .Pages }}&lt;/sup&gt;&lt;/h3&gt;
</code></pre></td></tr></table>
</div>
</div><p>这里同样是按照年份来分组的，如果想按照月份来分组，找到下面的内容：</p>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre class="chroma"><code><span class="lnt">1
</span><span class="lnt">2
</span><span class="lnt">3
</span></code></pre></td>
<td class="lntd">
<pre class="chroma"><code class="language-fallback" data-lang="fallback">{{- /* Paginate */ -}}
{{- if .Pages -}}
    {{- $pages := .Pages.GroupByDate &#34;2006&#34; -}}
</code></pre></td></tr></table>
</div>
</div><p>改成如下：</p>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre class="chroma"><code><span class="lnt">1
</span><span class="lnt">2
</span><span class="lnt">3
</span></code></pre></td>
<td class="lntd">
<pre class="chroma"><code class="language-fallback" data-lang="fallback">{{- /* Paginate */ -}}
{{- if .Pages -}}
    {{- $pages := .Pages.GroupByDate &#34;2006-01&#34; -}}
</code></pre></td></tr></table>
</div>
</div><h2 id="修改侧边栏目录样式">修改侧边栏目录样式</h2>
<p>默认侧边栏的目录是全展开的，如果文章太长，小标题太多，就会导致目录非常长，看起来不方便。可以改成只展开当前正在查看的小标题对应的目录，在<code>_custom.scss</code>里添加如下样式：</p>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre class="chroma"><code><span class="lnt"> 1
</span><span class="lnt"> 2
</span><span class="lnt"> 3
</span><span class="lnt"> 4
</span><span class="lnt"> 5
</span><span class="lnt"> 6
</span><span class="lnt"> 7
</span><span class="lnt"> 8
</span><span class="lnt"> 9
</span><span class="lnt">10
</span><span class="lnt">11
</span><span class="lnt">12
</span><span class="lnt">13
</span></code></pre></td>
<td class="lntd">
<pre class="chroma"><code class="language-css" data-lang="css"><span class="c">/* 目录 */</span>
<span class="nt">nav</span><span class="p">#</span><span class="nn">TableOfContents</span> <span class="nt">ol</span> <span class="p">{</span>
    <span class="n">padding-inline-start</span><span class="p">:</span> <span class="mi">30</span><span class="kt">px</span><span class="p">;</span>

    <span class="err">&amp;</span> <span class="err">ol</span> <span class="err">{</span>
        <span class="n">padding-inline-start</span><span class="p">:</span> <span class="mi">25</span><span class="kt">px</span><span class="p">;</span>
        <span class="k">display</span><span class="p">:</span> <span class="kc">none</span><span class="p">;</span>
    <span class="p">}</span>

    <span class="o">&amp;</span> <span class="nt">li</span><span class="p">.</span><span class="nc">has-active</span> <span class="nt">ol</span> <span class="p">{</span>
        <span class="k">display</span><span class="p">:</span> <span class="kc">block</span><span class="p">;</span>
    <span class="p">}</span>
<span class="err">}</span>
</code></pre></td></tr></table>
</div>
</div></div><div class="post-footer" id="post-footer">
    <div class="post-info">
        <div class="post-info-line">
            <div class="post-info-mod">
                <span>更新于 2021-03-10</span>
            </div>
            <div class="post-info-license"></div>
        </div>
        <div class="post-info-line">
            <div class="post-info-md"><span>
                            <a class="link-to-markdown" href="/posts/test/index.md" target="_blank">阅读原始文档</a>
                        </span></div>
            <div class="post-info-share">
                <span><a href="javascript:void(0);" title="分享到 Twitter" data-sharer="twitter" data-url="http://kwwgoo.github.io/posts/test/" data-title="Lovelt主题美化" data-hashtags="Hugo"><i class="fab fa-twitter fa-fw"></i></a><a href="javascript:void(0);" title="分享到 微博" data-sharer="weibo" data-url="http://kwwgoo.github.io/posts/test/" data-title="Lovelt主题美化" data-image="featured-image.png"><i class="fab fa-weibo fa-fw"></i></a></span>
            </div>
        </div>
    </div>

    <div class="post-info-more">
        <section class="post-tags"><i class="fas fa-tags fa-fw"></i>&nbsp;<a href="/tags/hugo/">Hugo</a></section>
        <section>
            <span><a href="javascript:void(0);" onclick="window.history.back();">返回</a></span>&nbsp;|&nbsp;<span><a href="/">主页</a></span>
        </section>
    </div>

    <div class="post-nav">
            <a href="/posts/2021-3-12/" class="next" rel="next" title="主题美化">主题美化<i class="fas fa-angle-right fa-fw"></i></a></div>
</div>
<div id="comments"></div></article></div>
            </main><footer class="footer">
        <div class="footer-container"><div class="footer-line">由 <a href="https://gohugo.io/" target="_blank" rel="noopener noreffer" title="Hugo 0.80.0">Hugo</a> 强力驱动 | 主题 - <a href="https://github.com/dillonzq/LoveIt" target="_blank" rel="noopener noreffer" title="LoveIt 0.2.10"><i class="far fa-kiss-wink-heart fa-fw"></i> LoveIt</a>
                </div><div class="footer-line"><i class="far fa-copyright fa-fw"></i><span itemprop="copyrightYear">2021</span><span class="author" itemprop="copyrightHolder">&nbsp;<a href="http://kwwgoo.github.io" target="_blank">kwwgoo</a></span>&nbsp;|&nbsp;<span class="license"><a rel="license external nofollow noopener noreffer" href="https://creativecommons.org/licenses/by-nc/4.0/" target="_blank">CC BY-NC 4.0</a></span></div>
        </div>
    </footer></div>
        <div class="snow-container">
            <div class="snow foreground"></div>
            <div class="snow foreground layered"></div>
            <div class="snow middleground"></div>
            <div class="snow middleground layered"></div>
            <div class="snow background"></div>
            <div class="snow background layered"></div>
          </div>
        <div id="fixed-buttons"><a href="#" id="back-to-top" class="fixed-button" title="回到顶部">
                <i class="fas fa-arrow-up fa-fw"></i>
            </a><a href="#" id="view-comments" class="fixed-button" title="查看评论">
                <i class="fas fa-comment fa-fw"></i>
            </a>
        </div>
        <div class="sidebar_wo">
            <div id="leimu">
              <img src="https://cdn.jsdelivr.net/gh/lewky/lewky.github.io@master/images/b2t/leimuA.png" alt="雷姆" 
              onmouseover="this.src='https://cdn.jsdelivr.net/gh/lewky/lewky.github.io@master/images/b2t/leimuB.png'" 
              onmouseout="this.src='https://cdn.jsdelivr.net/gh/lewky/lewky.github.io@master/images/b2t/leimuA.png'" title="回到顶部">
            </div>
            <div class="sidebar_wo" id="lamu">
              <img src="https://cdn.jsdelivr.net/gh/lewky/lewky.github.io@master/images/b2t/lamuA.png" alt="雷姆" 
              onmouseover="this.src='https://cdn.jsdelivr.net/gh/lewky/lewky.github.io@master/images/b2t/lamuB.png'" 
              onmouseout="this.src='https://cdn.jsdelivr.net/gh/lewky/lewky.github.io@master/images/b2t/lamuA.png'" title="回到底部">
            </div>
          </div><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/smooth-scroll@16.1.3/dist/smooth-scroll.min.js"></script><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/autocomplete.js@0.37.1/dist/autocomplete.min.js"></script><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/algoliasearch@4.2.0/dist/algoliasearch-lite.umd.min.js"></script><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/lazysizes@5.2.2/lazysizes.min.js"></script><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/twemoji@13.0.0/dist/twemoji.min.js"></script><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/clipboard@2.0.6/dist/clipboard.min.js"></script><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/sharer.js@0.4.0/sharer.min.js"></script><script type="text/javascript">window.config={"code":{"copyTitle":"复制到剪贴板","maxShownLines":10},"comment":{},"search":{"algoliaAppID":"6C90BU6DO0","algoliaIndex":"index_zh","algoliaSearchKey":"88613b42faafc2ac61f107db18c722b5","highlightTag":"em","maxResultLength":10,"noResultsFound":"没有找到结果","snippetLength":50,"type":"algolia"},"twemoji":true};</script><script type="text/javascript" src="/js/theme.min.js"></script><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/jquery@2.1.3/dist/jquery.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/jquery-backstretch@2.1.18/jquery.backstretch.min.js"></script>

<script> $(function () {
            $(".site-avatar-plug-bilibili").attr("src", "/images/avatar-plug/bilibili_" + (~~( 128 *Math.random())+1) + ".png");
        }); 
    var avatar_plug = 0;
    var avatar_click = 1;
    jQuery(document).ready(function($) {
         
        var frequency =  1 ;
         
        var plug_count =  128 ;
        $("div.home-avatar a").click(function(e) {
            if (avatar_click % frequency === 0) {
                avatar_plug ++;
                $(".site-avatar-plug-bilibili").attr("src", "/images/avatar-plug/bilibili_" + avatar_plug + ".png");
            }		
            if (avatar_plug === plug_count) {
                avatar_plug = 0;
            }
            $("div.home-avatar a").attr("alt","再点击" + (frequency - avatar_click % frequency) + "次头像试试看~~");
            avatar_click ++;
        });
    });</script><script type="text/javascript" src="/js/mouse.js"></script>
<script type="text/javascript" src="/js/custom.js"></script><script type="text/javascript">
            window.dataLayer=window.dataLayer||[];function gtag(){dataLayer.push(arguments);}gtag('js', new Date());
            gtag('config', 'G-YW4BXSD5CE', { 'anonymize_ip': true });
        </script><script type="text/javascript" src="https://www.googletagmanager.com/gtag/js?id=G-YW4BXSD5CE" async></script><script>
			var _hmt = _hmt || [];
			(function() {
			  var hm = document.createElement("script");
			  hm.src = "https://hm.baidu.com/hm.js?f8fabc0c58b2b304a6a43c2bc6d0cb86";
			  var s = document.getElementsByTagName("script")[0]; 
			  s.parentNode.insertBefore(hm, s);
			})();
		</script></body>
</html>
